<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问时间限制</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .bg-gradient {
                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            }
            .img-container {
                overflow: hidden;
                border-radius: 1rem;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient flex flex-col items-center justify-center p-4 font-sans text-dark">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
        <!-- 头部图标区域 -->
        <div class="bg-secondary/10 p-6 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-secondary/20 mb-4 animate-float">
                <i class="fa fa-clock-o text-3xl text-secondary"></i>
            </div>
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">访问时间受限</h1>
            <p class="text-gray-600">抱歉，此服务有特定的访问时间限制</p>
        </div>

        <!-- 动态图片区域 -->
        <div class="px-6 -mt-2">
            <div class="img-container shadow-md animate-pulse-slow">
                <img src="https://picsum.photos/seed/time/600/200" alt="时钟与时间概念图" class="w-full h-40 object-cover transition-transform duration-700 hover:scale-110">
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="p-6">
            <div class="bg-gray-50 rounded-xl p-5 mb-6">
                <h2 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>
                    允许访问时间
                </h2>
                <p class="text-gray-700 mb-4">本服务仅在以下时间段开放：</p>
                <div class="flex items-center justify-center bg-primary/10 rounded-lg p-4">
                    <span class="text-xl font-bold text-primary">
                        每天 11:00 — 22:59
                    </span>
                </div>
            </div>

            <!-- 当前时间显示 -->
            <div class="bg-gray-50 rounded-xl p-5 mb-6">
                <h2 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fa fa-calendar-check-o text-primary mr-2"></i>
                    当前时间
                </h2>
                <div id="current-time" class="text-center text-xl font-mono font-bold text-gray-800">
                    --:--:--
                </div>
                <div id="current-date" class="text-center text-gray-600 mt-1">
                    ----年--月--日 星期-
                </div>
            </div>

            <!-- 下次可用时间 -->
            <div id="next-available" class="bg-gray-50 rounded-xl p-5 mb-6 hidden">
                <h2 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fa fa-hourglass-half text-secondary mr-2"></i>
                    下次可用时间
                </h2>
                <div id="next-time" class="text-center text-xl font-mono font-bold text-secondary">
                    --:--:--
                </div>
                <div id="countdown" class="text-center text-gray-600 mt-3">
                    距离可用还有: <span class="font-semibold">00小时00分钟00秒</span>
                </div>
            </div>

            <!-- 状态提示 -->
            <div id="status-message" class="text-center py-3 rounded-lg mb-6">
                <p class="font-medium">正在检查访问权限...</p>
            </div>

            <!-- 操作按钮 -->
            <div class="flex space-x-3">
                <button id="refresh-btn" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                    <i class="fa fa-refresh mr-2"></i> 刷新状态
                </button>
                <button onclick="history.back()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                    <i class="fa fa-arrow-left mr-2"></i> 返回
                </button>
            </div>
        </div>
    </div>

    <footer class="mt-8 text-center text-gray-500 text-sm">
        <p>如有疑问，请联系系统管理员</p>
    </footer>

    <script>
        // 检查当前时间是否在允许访问的范围内（修改为11:00-22:59）
        function isWithinAllowedTime() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            
            // 允许访问时间：11:00 - 22:59
            if (hours > 11 && hours < 22) {
                return true;
            } else if (hours === 11) {
                return true; // 11点整及之后都允许
            } else if (hours === 22) {
                return minutes <= 59; // 22:59及之前允许
            }
            return false;
        }

        // 计算距离下次可用时间的毫秒数
        function getTimeUntilNextAvailable() {
            const now = new Date();
            const hours = now.getHours();
            
            let nextAvailable;
            
            if (hours < 11) {
                // 现在是11点前，下次可用是今天11点
                nextAvailable = new Date(now);
                nextAvailable.setHours(11, 0, 0, 0);
            } else {
                // 现在是23点或之后，下次可用是明天11点
                nextAvailable = new Date(now);
                nextAvailable.setDate(now.getDate() + 1);
                nextAvailable.setHours(11, 0, 0, 0);
            }
            
            return nextAvailable - now;
        }

        // 格式化时间显示
        function formatTime(date) {
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }

        // 格式化日期显示
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            const weekday = weekdays[date.getDay()];
            return `${year}年${month}月${day}日 星期${weekday}`;
        }

        // 格式化倒计时
        function formatCountdown(ms) {
            const totalSeconds = Math.floor(ms / 1000);
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            
            return `${String(hours).padStart(2, '0')}小时${String(minutes).padStart(2, '0')}分钟${String(seconds).padStart(2, '0')}秒`;
        }

        // 更新页面显示
        function updatePage() {
            const now = new Date();
            const withinAllowedTime = isWithinAllowedTime();
            
            // 更新当前时间和日期
            document.getElementById('current-time').textContent = formatTime(now);
            document.getElementById('current-date').textContent = formatDate(now);
            
            // 更新状态消息
            const statusElement = document.getElementById('status-message');
            const nextAvailableElement = document.getElementById('next-available');
            
            if (withinAllowedTime) {
                statusElement.innerHTML = `
                    <p class="font-medium text-green-600"><i class="fa fa-check-circle mr-1"></i> 当前时间允许访问</p>
                `;
                statusElement.className = 'text-center py-3 rounded-lg mb-6 bg-green-50';
                nextAvailableElement.classList.add('hidden');
            } else {
                statusElement.innerHTML = `
                    <p class="font-medium text-red-600"><i class="fa fa-exclamation-circle mr-1"></i> 当前时间不允许访问</p>
                `;
                statusElement.className = 'text-center py-3 rounded-lg mb-6 bg-red-50';
                nextAvailableElement.classList.remove('hidden');
                
                // 计算下次可用时间
                const nextAvailable = new Date(now);
                if (now.getHours() < 11) {
                    nextAvailable.setHours(11, 0, 0, 0);
                } else {
                    nextAvailable.setDate(now.getDate() + 1);
                    nextAvailable.setHours(11, 0, 0, 0);
                }
                
                document.getElementById('next-time').textContent = formatTime(nextAvailable);
                document.getElementById('countdown').innerHTML = 
                    `距离可用还有: <span class="font-semibold">${formatCountdown(getTimeUntilNextAvailable())}</span>`;
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 立即更新一次
            updatePage();
            
            // 每秒更新一次
            setInterval(updatePage, 1000);
            
            // 刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', () => {
                // 添加点击动画
                const btn = document.getElementById('refresh-btn');
                btn.classList.add('scale-95');
                setTimeout(() => btn.classList.remove('scale-95'), 200);
                
                // 强制刷新
                updatePage();
            });
        });
    </script>
</body>
</html>
